<template>
  <div class="tool-features">
    <!-- 核心特性 -->
    <div v-if="features && features.length > 0" class="mb-8">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
        <Icon name="heroicons:sparkles" class="w-5 h-5 text-blue-600" />
        核心特性
      </h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div
          v-for="(feature, index) in features"
          :key="index"
          class="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg"
        >
          <Icon name="heroicons:check-circle" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
          <span class="text-gray-700 dark:text-gray-300">{{ feature }}</span>
        </div>
      </div>
    </div>

    <!-- 使用场景 -->
    <div v-if="useCases" class="mb-8">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
        <Icon name="heroicons:light-bulb" class="w-5 h-5 text-yellow-500" />
        使用场景
      </h3>
      <div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border-l-4 border-yellow-500">
        <p class="text-gray-700 dark:text-gray-300">{{ useCases }}</p>
      </div>
    </div>

    <!-- 优缺点对比 -->
    <div v-if="(pros && pros.length > 0) || (cons && cons.length > 0)" class="mb-8">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
        优缺点分析
      </h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- 优点 -->
        <div v-if="pros && pros.length > 0" class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
          <h4 class="font-semibold text-green-700 dark:text-green-400 mb-3 flex items-center gap-2">
            <Icon name="heroicons:hand-thumb-up" class="w-5 h-5" />
            优点
          </h4>
          <ul class="space-y-2">
            <li
              v-for="(pro, index) in pros"
              :key="index"
              class="flex items-start gap-2 text-gray-700 dark:text-gray-300"
            >
              <Icon name="heroicons:plus-circle" class="w-4 h-4 text-green-600 flex-shrink-0 mt-1" />
              <span>{{ pro }}</span>
            </li>
          </ul>
        </div>

        <!-- 缺点 -->
        <div v-if="cons && cons.length > 0" class="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
          <h4 class="font-semibold text-red-700 dark:text-red-400 mb-3 flex items-center gap-2">
            <Icon name="heroicons:hand-thumb-down" class="w-5 h-5" />
            缺点
          </h4>
          <ul class="space-y-2">
            <li
              v-for="(con, index) in cons"
              :key="index"
              class="flex items-start gap-2 text-gray-700 dark:text-gray-300"
            >
              <Icon name="heroicons:minus-circle" class="w-4 h-4 text-red-600 flex-shrink-0 mt-1" />
              <span>{{ con }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 推荐理由 -->
    <div v-if="recommendation" class="mb-8">
      <div class="p-4 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
        <div class="flex items-start gap-3">
          <Icon name="heroicons:star" class="w-6 h-6 text-purple-600 flex-shrink-0 mt-1" />
          <div>
            <h4 class="font-semibold text-purple-900 dark:text-purple-300 mb-2">推荐理由</h4>
            <p class="text-gray-700 dark:text-gray-300">{{ recommendation }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 相关链接 -->
    <div v-if="relatedLinks && relatedLinks.length > 0" class="mb-8">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
        <Icon name="heroicons:link" class="w-5 h-5 text-gray-600" />
        相关链接
      </h3>
      <div class="flex flex-wrap gap-3">
        <a
          v-for="(link, index) in relatedLinks"
          :key="index"
          :href="link.url"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
        >
          <Icon name="heroicons:arrow-top-right-on-square" class="w-4 h-4" />
          {{ link.title }}
        </a>
      </div>
    </div>

    <!-- 快捷链接栏 -->
    <div v-if="docsUrl || githubUrl || videoUrl" class="flex flex-wrap gap-3">
      <a
        v-if="docsUrl"
        :href="docsUrl"
        target="_blank"
        rel="noopener noreferrer"
        class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
      >
        <Icon name="heroicons:document-text" class="w-4 h-4" />
        查看文档
      </a>
      <a
        v-if="githubUrl"
        :href="githubUrl"
        target="_blank"
        rel="noopener noreferrer"
        class="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 dark:bg-gray-700 text-white rounded-lg hover:bg-gray-800 dark:hover:bg-gray-600 transition-colors"
      >
        <Icon name="simple-icons:github" class="w-4 h-4" />
        GitHub
      </a>
      <a
        v-if="videoUrl"
        :href="videoUrl"
        target="_blank"
        rel="noopener noreferrer"
        class="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
      >
        <Icon name="heroicons:play-circle" class="w-4 h-4" />
        视频介绍
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Link {
  title: string
  url: string
}

interface Props {
  features?: string[]
  useCases?: string
  pros?: string[]
  cons?: string[]
  recommendation?: string
  relatedLinks?: Link[]
  docsUrl?: string
  githubUrl?: string
  videoUrl?: string
}

defineProps<Props>()
</script>

